<template>
  <div class="app-container">
    <div class="searchform">
      <ToolBar :filters="filters" :getList="getList" :handleAdd="handleCreate"/>
    </div>
    <el-table v-loading="listLoading" :data="incubatorList" element-loading-text="Loading" fit highlight-current-row>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix subtab_tit">
                  <span>蓄冷剂配置列表</span>
                </div>
                <el-table :data="scope.row.refrigerantList" stripe style="width: 100%" border>
                  <el-table-column type="index" width="40"></el-table-column>
                  <el-table-column prop="name" label="蓄冷剂组名称" width="200" min-width="200"></el-table-column>
                  <el-table-column prop="lowTemperature" label="最低温度(℃)" align="center" min-width="100"></el-table-column>
                  <el-table-column prop="highTempature" label="最高温度(℃)" align="center" min-width="100"></el-table-column>
                  <el-table-column prop="temperature" label="变相温度(℃)" align="center" min-width="100"></el-table-column>
                  <el-table-column prop="model" label="蓄冷剂型号"></el-table-column>
                  <el-table-column fixed="right" label="操作" width="250" min-width="250">
                    <template slot-scope="scope">
                      <el-button size="small" type="warning" @click="refrigerantUpdate(scope.$index, scope.row)">
                        <i class="el-icon-edit"></i>
                      </el-button>
                      <el-button size="small" type="primary" @click="refrigerantPicUpdate(scope.$index, scope.row)">图片编辑</el-button>
                      <el-button @click.native.prevent="refrigerantDel(scope.$index, scope.row)" icon="el-icon-delete" size="small" type="danger"></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column align="center" label="ID" prop="id" width="95" type="index"></el-table-column>
      <el-table-column label="设备名称">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="设备编号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.customerCode }}</span>
        </template>
      </el-table-column>

      <el-table-column label="容积" align="center" min-width="100" >
        <template slot-scope="scope">{{ scope.row.volume }} L</template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="335" min-width="335">
        <template slot-scope="scope">
          <el-button size="small" type="warning" @click="handleUpdate(scope.$index, scope.row)">
            <i class="el-icon-edit"></i>
          </el-button>
          <el-button size="small" type="primary" @click="refrigerantCreate(scope.$index, scope.row)">新增蓄冷剂组</el-button>
          <el-button size="small" type="warning" @click="incubatorPicUpdate(scope.$index, scope.row)">图片编辑</el-button>
          <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDel(scope.$index, scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--翻页-->
    <el-col :span="24" class="toolbar">
      <Pagination v-show="total>0" :total="total" :pageSize="pagesize" :handleCurrentChange="handleCurrentChange"/>
    </el-col>

    <!-- 蓄冷剂弹窗 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="RefrigerantFormVisible" :close-on-click-modal="false" width="870px">
      <el-form label-width="120px" :model="Form" :rules="FormRules" ref="dataForm">
        <el-form-item label="蓄冷剂组名称" prop="name" width="100%">
          <el-input v-model="Form.name"></el-input>
        </el-form-item>
        <el-form-item label="温度范围：">
          <span>
            <el-input-number v-model="Form.lowTemperature" :precision="2" :step="0.1" label="最低温度："></el-input-number>&nbsp;℃
          </span>
          <span>到</span>
          <span>
            <el-input-number v-model="Form.highTempature" :precision="2" :step="0.1" label="最高温度："></el-input-number>&nbsp;℃
          </span>
        </el-form-item>
        <el-form-item label="蓄冷剂长：">
          <span>
            <el-input-number v-model="Form.length" label="长" :min="0"></el-input-number>&nbsp;mm，
          </span>
           <span>
            <span>宽</span>
            <el-input-number v-model="Form.width" label="宽" :min="0"></el-input-number>&nbsp;mm，
          </span>
          <span>
            <span>高</span>
            <el-input-number v-model="Form.height" label="高" :min="0"></el-input-number>&nbsp;mm，
          </span>
        </el-form-item>
        <el-form-item label="蓄冷剂型号：" prop="model">
          <el-input v-model="Form.model"></el-input>
        </el-form-item>
        <el-form-item label="蓄冷剂数量：" prop="model">
          <el-input-number v-model="Form.count"></el-input-number>&nbsp;个
        </el-form-item>
        <el-form-item label="变形温度：">
          <el-input-number v-model="Form.temperature" :precision="2" label="变相温度"></el-input-number>&nbsp;℃
        </el-form-item>
        <el-form-item v-show="dialogStatus==='createfrigerant'" label="蓄冷剂图片：" prop="picList">
          <UploadCreateImg
            ref="refrigerantPic"
            :isMultiple="true"
            :FileUrl="refrigerantFileUrl"
            :Data="Data"
            :picList="picList"
            :handleChange="handleChange"
          ></UploadCreateImg>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="RefrigerantFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogStatus==='createfrigerant'?createRefrigerantData():updateRefrigerantData()">确定</el-button>
      </div>
    </el-dialog>

    <!-- 图片编辑弹窗 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogPicListVisible" :close-on-click-modal="false">
      <UploadImg
        :picList="picList"
        :FileUrl="FileUrl"
        :Data="Data"
        :handleAvatarSuccess="handleAvatarSuccess"
        :handleRemove="handleRemove"
        :beforeRemove="beforeRemove"
      ></UploadImg>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPicListVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getIncubatorList,
  deleteIncubator,
  getIncubatorData,
  deleteIncubatorPic,
  deleteRefrigerantPic,
  createRefrigerant,
  updateRefrigerant,
  deleteRefrigerant
} from "@/api/incubator";
import ToolBar from "@/views/layout/components/ToolBar";
import Pagination from "@/views/layout/components/Pagination";
import UploadImg from "@/components/Upload/UploadImg2";
import UploadCreateImg from "@/components/Upload/UploadImg3";
import { mapGetters } from "vuex";

export default {
  components: { ToolBar, Pagination, UploadImg, UploadCreateImg },

  data() {
    return {
      filters: {
        name: "",
        placeholder: "设备名称"
      },
      page: 1,
      total: 0,
      pagesize: 10,
      incubatorList: [],
      refrigerantList: [],
      listLoading: false,
      Form: {
        name: "",
        highTempature: 0,
        lowTemperature: 0,
        model: "",
        length:0,
        width: 0,
        height: 0,
        temperature: 0,
        count: 0,
        picList: []
      },

      FormRules: {
        name: [
          {
            type: "string",
            required: true,
            message: "请输入蓄冷机组名称",
            trigger: "blur"
          }
        ],
        model: [
          {
            type: "string",
            required: true,
            message: "请输入蓄冷机型号",
            trigger: "blur"
          }
        ],
        picList: [
          { required: true, message: "请上传蓄冷机组图片", trigger: "change" }
        ]
      },
      ref: "eluploadrefrigerantimg",
      incubatorId: "",
      refrigerantId: "",

      dialogStatus: "",
      RefrigerantFormVisible: false,
      dialogPicListVisible: false,
      textMap: {
        incubator: "编辑保温箱图片",
        refrigerant: "编辑蓄冷机组图片",
        createfrigerant: "新增蓄冷剂组",
        updatefrigerant: "编辑蓄冷剂组"
      },
      Data: {},

      FileUrl: "",
      refrigerantFileUrl: "http://gsp.coldcloud.com/refrigerant/pic/insert",
      incubatorFileUrl: "http://gsp.coldcloud.com/incubator/pic/insert",
      picList: []
    };
  },
  created() {
    this.getList();
  },
  computed: {
    ...mapGetters(["customerid"])
  },

  watch: {
    Form: {
      handler(newval, oldval) {
        this.Form.picList = newval.picList;
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    //新增图片上传检查
    handleChange(file, fileList) {
      const isImage =
        file.raw.type == "image/png" ||
        file.raw.type == "image/jpg" ||
        file.raw.type == "image/jpeg";
      if (!isImage) {
        this.$message.error("上传图片只能是JPG或者png格式!");
         fileList.pop();
      } else {
       if (this.dialogStatus == "createfrigerant") {
          this.Form.picList = fileList;
        }
      }
      return isImage
    },

    // 上传成功后
    handleAvatarSuccess(response, file, fileList) {
      this.$message({
        message: "图片上传成功",
        type: "success"
      });
      this.dialogPicListVisible = false;
      this.getList();
    },

    // 删除图片
    handleRemove(file, fileList) {
      if (file.hasOwnProperty("fid")) {
        if ((this.dialogStatus = "incubator")) {
          deleteIncubatorPic({ fid: file.fid });
        } else {
          deleteRefrigerantPic({ fid: file.fid });
        }
      }
    },

    beforeRemove(file, fileList) {
      if (file.hasOwnProperty("originname")) {
        if (fileList.length > 1) {
          return this.$confirm(`确定移除 ${file.originname}？`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          });
        } else {
          this.$message({
            message: "蓄冷剂组需至少保留一张图片",
            type: "warning"
          });
          return false;
        }
      }
    },

    // 获取列表
    getList() {
      this.listLoading = true;
      getIncubatorList({
        name: this.filters.name,
        customerId: this.customerid,
        page: this.page,
        size: this.pagesize
      }).then(response => {
          this.incubatorList = response.data.records;
          this.total = response.data.total;
          this.listLoading = false;
        })
        .catch(e => {});
    },
    // 翻页
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },

    //跳转编辑
    handleUpdate(index, row) {
      this.$router.push({
        path: "/devices/incubatorEdit/" + row.id
      });
    },
    //跳转新增
    handleCreate() {
      this.$router.push({
        path: "/devices/incubatorAdd/"
      });
    },

    //重置form
    resetForm() {
      this.Form = {
        name: "",
        highTempature: 0,
        lowTemperature: 0,
        model: "",
        width: 0,
        height: 0,
        temperature: 0,
        count: 0,
        picList: []
      };
    },

    // 显示增加界面
    refrigerantCreate(index, row) {
      this.picList = [];
      this.dialogStatus = "createfrigerant";
      this.RefrigerantFormVisible = true;
      this.incubatorId = row.id;
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate();
      });
    },

    // 新增蓄冷剂
    createRefrigerantData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          let tempData = Object.assign({}, this.Form, {
            incubatorId: this.incubatorId
          });
          createRefrigerant(tempData).then(res => {
            let refrigerantId = res.data.insertId;
            this.Data = { refrigerantId: refrigerantId };
            this.$nextTick(() => {
              this.$refs.refrigerantPic.UploadSubmit();
            });
            this.RefrigerantFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "新增蓄冷剂组成功",
              type: "success",
              duration: 2000
            });
          });
        }
      });
    },

    //显示编辑界面
    refrigerantUpdate(index, row) {
      this.Form = Object.assign(this.Form, row);
      this.dialogStatus = "updatefrigerant";
      this.RefrigerantFormVisible = true;
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate();
      });
    },

    //编辑蓄冷剂
    updateRefrigerantData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.Form);
          updateRefrigerant(tempData).then(() => {
            this.getList();
            this.RefrigerantFormVisible = false;
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
          });
        }
      });
    },

    //显示图片编辑界面
    incubatorPicUpdate(index, row) {
      this.picList = [];
      this.dialogStatus = "incubator";
      this.FileUrl = this.incubatorFileUrl;
      this.Data = { incubatorId: row.id };
      getIncubatorData({ incubatorId: row.id }).then(response => {
        this.picList = response.data.picList;
        this.dialogPicListVisible = true;
      });
    },
    refrigerantPicUpdate(index, row) {
      this.picList = [];
      this.dialogStatus = "refrigerant";
      this.Data = { refrigerantId: row.id };
      this.FileUrl = this.refrigerantFileUrl;
      this.picList = row.picList;
      this.dialogPicListVisible = true;
    },
    refrigerantDel(index, row) {
      this.$confirm("确认删除该蓄冷剂组吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.listLoading = true;
        deleteRefrigerant({ refrigerantId: row.id }).then(() => {
          this.getList();
          this.listLoading = false;
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
        });
      });
    },

    handleDel(index, row) {
      this.$confirm("确认删除该设备吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.listLoading = true;
        deleteIncubator({ incubatorId: row.id }).then(() => {
          this.listLoading = false;
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
          const index = this.incubatorList.indexOf(row);
          this.incubatorList.splice(index, 1);
        });
      });
    }
  }
};
</script>
<style>
.customerselect {
  color: #606266;
  font-size: 14px;
  float: left;
}
.subtab_tit {
  text-align: center;
}
</style>


